<template>
  <div class="detail-container">
    <div>
      <el-steps :active="stepStatusFormat(salesOrder.status)" finish-status="success" align-center>
        <el-step title="创建订单" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="已提交" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="提案确认中" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="提案已确认" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="合同已签订" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="生成发货计划" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="已发货" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
        <el-step title="已完成" :description="parseTime(salesOrder.createTime, '{y}-{m}-{d}')" />
      </el-steps>
      <el-card shadow="never" style="margin-top: 15px">
        <!-- 基本信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">订单单号</el-col>
            <el-col :span="6" class="table-cell-title">订单类型</el-col>
            <el-col :span="6" class="table-cell-title">订单来源</el-col>
            <el-col :span="6" class="table-cell-title">销售人员</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.salesOrderNo || '--' }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ orderTypeFormat(salesOrder.orderType) }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ sourceTypeFormat(salesOrder.sourceType) }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.salesManId }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">提案/报价</el-col>
            <el-col :span="6" class="table-cell-title">提案/报价时间</el-col>
            <el-col :span="6" class="table-cell-title">合同编号</el-col>
            <el-col :span="6" class="table-cell-title">合同签订时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ salesOrder.quoteUrl }}</el-col>
            <el-col :span="6" class="table-cell">{{ salesOrder.confirmQuoteTime }}</el-col>
            <el-col :span="6" class="table-cell">{{ salesOrder.contractNo }}</el-col>
            <el-col :span="6" class="table-cell">{{ salesOrder.signContractTime }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">支付方式</el-col>
            <el-col :span="6" class="table-cell-title">支付时间</el-col>
            <el-col :span="6" class="table-cell-title">发货信息</el-col>
            <el-col :span="6" class="table-cell-title">发货时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ payTypeFormat(salesOrder.payType) }}</el-col>
            <el-col :span="6" class="table-cell">{{ salesOrder.payTime }}</el-col>
            <el-col :span="6" class="table-cell">{{ expressInfoFormat(salesOrder) }}</el-col>
            <el-col :span="6" class="table-cell">{{ salesOrder.deliveryTime }}</el-col>
          </el-row>
        </div>
        <!-- 客户信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">客户信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">客户名称</el-col>
            <el-col :span="6" class="table-cell-title">客户类型</el-col>
            <el-col :span="6" class="table-cell-title">客户联系人</el-col>
            <el-col :span="6" class="table-cell-title">联系人电话</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.customerName }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.customerTypeName }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.customerContactName }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.customerContactPhone }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">收货人</el-col>
            <el-col :span="6" class="table-cell-title">收货人电话</el-col>
            <el-col :span="6" class="table-cell-title">省市区</el-col>
            <el-col :span="6" class="table-cell-title">详细地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.receiver }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.receiverPhone }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.region }}
            </el-col>
            <el-col :span="6" class="table-cell">
              {{ salesOrder.receiverAddress }}
            </el-col>
          </el-row>
        </div>
        <!-- 商品信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">商品信息</span>
        </div>
        <el-table ref="itemTable" :data="salesOrder.items" style="width: 100%;margin-top: 20px" border>
          <el-table-column label="商品" align="center">
            <template slot-scope="scope">
              {{ scope.row.spuName }}
            </template>
          </el-table-column>
          <el-table-column label="品牌" align="center">
            <template slot-scope="scope">
              {{ scope.row.brandName }}
            </template>
          </el-table-column>
          <el-table-column label="分类" align="center">
            <template slot-scope="scope">
              {{ scope.row.categoryName }}
            </template>
          </el-table-column>
          <el-table-column label="货号" align="center">
            <template slot-scope="scope">
              {{ scope.row.sn }}
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.qty }}
            </template>
          </el-table-column>
          <el-table-column label="小计" align="center">
            <template slot-scope="scope">
              ￥{{ scope.row.price * scope.row.qty }}
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right;margin: 20px">
          合计：<span class="color-danger">￥{{ salesOrder.totalMoney }}</span>
        </div>
        <!-- 审核信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">审核信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">审核环节</el-col>
            <el-col :span="18" class="table-cell-title">审核结果</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              <span>部门主管审核</span>
            </el-col>
            <el-col :span="18" class="table-cell">
              <span>{{ salesOrder.supervisorAuditRemark }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              <span>部门经理审核</span>
            </el-col>
            <el-col :span="18" class="table-cell">
              <span>{{ salesOrder.deptManagerAuditRemark }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">
              <span>总经理审核</span>
            </el-col>
            <el-col :span="18" class="table-cell">
              <span>{{ salesOrder.generalManagerAuditRemark }}</span>
            </el-col>
          </el-row>
        </div>
        <!-- 操作信息 -->
        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">操作信息</span>
        </div>
        <el-table ref="orderEventTable" :data="salesOrder.events" style="margin-top: 20px;width: 100%" border>
          <el-table-column label="操作者" align="center">
            <template slot-scope="scope">
              {{ scope.row.operateMan }}
            </template>
          </el-table-column>
          <el-table-column label="操作时间" align="center">
            <template slot-scope="scope">
              {{ formatTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="原订单状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.preStatus }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.orderStatus }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              {{ scope.row.note }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import SalesOrderApi from '@/api/order/SalesOrderApi'
import DictValueApi from '@/api/system/DictValueApi'
import UserApi from '@/api/system/UserApi'
import RegionApi from '@/api/system/RegionApi'
import SpuApi from '@/api/goods/SpuApi'
import CustomerApi from '@/api/basic/CustomerApi'
import ExpressCompanyApi from '@/api/order/ExpressCompanyApi'

export default {
  name: 'SalesOrderView',
  components: {
  },
  data() {
    return {
      options: {
        orderTypeOptions: [],
        sourceTypeOptions: [],
        salesOrderStatusOptions: [],
        salesManOptions: [],
        payTypeOptions: [],
        goodsOptions: [],
        customerOptions: [],
        regionOptions: [],
        expressCompanyOptions: []
      },
      salesOrder: {
        items: []
      }
    }
  },
  computed: {
    salesOrderNo() {
      return this.$route.params.salesOrderNo
    }
  },
  created() {
    this.init()
    this.loadOptions()
  },
  methods: {
    init() {
      SalesOrderApi.getBySalesOrderNo(this.salesOrderNo).then(response => {
        this.salesOrder = response.data
      })
    },
    loadOptions() {
      DictValueApi.list({ dictCode: 'oms_sales_order_type' }).then(response => {
        this.options.orderTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'oms_sales_order_source' }).then(response => {
        this.options.sourceTypeOptions = response.data
      })
      DictValueApi.list({ dictCode: 'oms_sales_order_status' }).then(response => {
        this.options.salesOrderStatusOptions = response.data
      })
      DictValueApi.list({ dictCode: 'sys_payment_type' }).then(response => {
        this.options.payTypeOptions = response.data
      })
      SpuApi.list().then(response => {
        this.options.goodsOptions = response.data
      })
      UserApi.roleUsers({ roleId: '1356074716665876480' }).then(response => {
        this.options.salesManOptions = response.data
      })
      CustomerApi.list().then(response => {
        this.options.customerOptions = response.data
      })
      RegionApi.tree().then(response => {
        this.options.regionOptions = this.$common.list2Tree(response.data)
      })
      ExpressCompanyApi.list().then(response => {
        this.options.expressCompanyOptions = response.data
      })
    },
    stepStatusFormat(orderStatus) {
      if (orderStatus === 'created') {
        return 2
      }
      if (orderStatus === 'submitted') {
        return 3
      }
      if (orderStatus === 'unconfirmed') {
        return 4
      }
      if (orderStatus === 'confirmed') {
        return 5
      }
      if (orderStatus === 'contract_signed') {
        return 6
      }
      if (orderStatus === 'delivery_plan') {
        return 7
      }
      if (orderStatus === 'delivered') {
        return 8
      }
      if (orderStatus === 'completed') {
        return 9
      }
      return 1
    },
    orderStatusFormat(status) {
      return this.$common.getDictValueName(this.options.salesOrderStatusOptions, status)
    },
    orderTypeFormat(type) {
      return this.$common.getDictValueName(this.options.orderTypeOptions, type)
    },
    sourceTypeFormat(type) {
      return this.$common.getDictValueName(this.options.sourceTypeOptions, type)
    },
    payTypeFormat(type) {
      return this.$common.getDictValueName(this.options.payTypeOptions, type)
    },
    expressInfoFormat(salesOrder) {
      const expressCompanyName = salesOrder.expressCompanyName ? salesOrder.expressCompanyName : ''
      const expressNo = salesOrder.expressNo ? salesOrder.expressNo : ''
      return expressCompanyName + ' ' + expressNo
    }
  }
}
</script>
<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
